
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> 
<html> <!--<![endif]-->
    <head>

        <!-- Meta Tags -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>Hotel Booking</title>   

        <meta name="description" content="Insert Your Site Description" /> 

        <!-- Mobile Specifics -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>   

        <!-- Mobile Internet Explorer ClearType Technology -->
        <!--[if IEMobile]>  <meta http-equiv="cleartype" content="on">  <![endif]-->

        <!-- Bootstrap -->
        <link href="_include/css/bootstrap.min.css" rel="stylesheet">

        <!-- Main Style -->
        <link href="_include/css/main.css" rel="stylesheet">

        <!-- Custom Style -->
        <link href="_include/css/hotelBooking.css" rel="stylesheet">

        <!-- Supersized -->
        <link href="_include/css/supersized.css" rel="stylesheet">
        <link href="_include/css/supersized.shutter.css" rel="stylesheet">

        <!-- FancyBox -->
        <link href="_include/css/fancybox/jquery.fancybox.css" rel="stylesheet">

        <!-- Font Icons -->
        <link href="_include/css/fonts.css" rel="stylesheet">

        <!-- Shortcodes -->
        <link href="_include/css/shortcodes.css" rel="stylesheet">

        <!-- Responsive -->
        <link href="_include/css/bootstrap-responsive.min.css" rel="stylesheet">
        <link href="_include/css/responsive.css" rel="stylesheet">

        <!-- Supersized -->
        <link href="_include/css/supersized.css" rel="stylesheet">
        <link href="_include/css/supersized.shutter.css" rel="stylesheet">

        <!-- Google Font -->
        <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900' rel='stylesheet' type='text/css'>

        <!-- Fav Icon -->
        <link rel="shortcut icon" href="#">

        <link rel="apple-touch-icon" href="#">
        <link rel="apple-touch-icon" sizes="114x114" href="#">
        <link rel="apple-touch-icon" sizes="72x72" href="#">
        <link rel="apple-touch-icon" sizes="144x144" href="#">

        <!-- Modernizr -->
        <script src="_include/js/modernizr.js"></script>

        <!-- Analytics -->
        <script type="text/javascript">

            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'Insert Your Code']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script');
                ga.type = 'text/javascript';
                ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(ga, s);
            })();

        </script>
        <!-- End Analytics -->

        <!-- JQuery -->
        <script src="_include/js/jquery-1.10.2.min.js"></script>

    </head>


    <body>

        <!-- This section is for Splash Screen -->
        <!--    <div class="ole">
              <section id="jSplash">
                <div id="circle"></div>
              </section>
            </div>-->
        <!-- End of Splash Screen -->

        <!-- Homepage Slider -->
        <!--    <div id="home-slider">	
              <div class="overlay"></div>
        
              <div class="slider-text">
                <div id="slidecaption"></div>
              </div>   
        
              <div class="control-nav">
                <a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
                <a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
                <ul id="slide-list"></ul>
        
                <a id="nextsection" href="#work"><i class="font-icon-arrow-simple-down"></i></a>
              </div>
            </div>-->
        <!-- End Homepage Slider -->

        <!-- Header -->
        <header>
            <div class="sticky-nav">
                <a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>

                <div id="logo">
                    <a id="goUp" href="#home-slider" title="Hotel Booking">Hotel Booking</a>
                </div>

                <nav id="menu">
                    <ul id="menu-nav">
                        <li class="current"><a href="HomeServlet">Home</a></li>
                        <li><a href="AdminServlet">Admin space</a></li> <%-- ko lam--%>
                        <li><a href="HostServlet">Host</a></li>  <%--add hotel, view order--%>
                        <li><a href="ProfileServlet" class="external">Profile</a></li> <%--ko lam--%>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- End Header -->

        <!-- Our Work Section -->
        <div id="home" class="page">
            <div class="container">
                <!-- Title Page -->
                <div class="row">
                    <div class="span12">
                        <div class="title-page">
                            <h2 class="title">Hotel Details Management</h2>
                            <h3 class="title-description">Welcome to Hotel Booking</h3>
                        </div>
                    </div>
                </div>
                <!-- End Title Page -->

                <!-- Portfolio Projects -->
                <div class="row">
                    <div class="span3">
                        <!-- Filter -->
                        <nav id="options" class="work-nav">
                            <ul id="filters" class="option-set" data-option-key="filter">
                                <li class="type-work">Cities in Viet Nam</li>
                                <li><a href="#filter" data-option-value="*" class="selected">Ha Noi</a></li>
                                <li><a href="#filter" data-option-value=".design">TP Ho Chi Minh</a></li>
                                <li><a href="#filter" data-option-value=".photography">Nha Trang</a></li>
                                <li><a href="#filter" data-option-value=".video">Phu Quoc</a></li>
                            </ul>
                        </nav>
                        <!-- End Filter -->
                    </div>

                    <div class="span9">          
                        <div class="info-block">
                            <div class="info-text">
                                <form id="contact-form" class="contact-form" name="form1" action="#">
                                    <h2>Hotel Name</h2>   
                                    <input id="contact_name" type="text" name="nameText" value="Sample First Name" />

                                    Hotel address:<br/>
                                    <input id="contact_name" type="text" name="addressText" value="Sample First Name" />

                                    Hotel phone:<br/>
                                    <input id="contact_email" type="text" name="phoneText" value="Sample Last Name" />

                                    Hotel description:<br/>
                                    <input id="contact_email" type="text" name="descriptionText" value="Sample Sex" />

                                    Hotel price:<br/>
                                    <input id="contact_email" type="text" name="priceText" value="Sample Birthday" />

                                    Hotel star:<br/>
                                    <input id="contact_email" type="text" name="starText" value="Sample Email" />

                                    <input id="contact-submit" class="submit" type="button" name="updateButton" value="Update" disabled="true" />
                                    <input id="contact-submit" class="submit" type="button" name="cancelButton" value="Restore" disabled="true" />

                                    <div id="response">
                                    </div>
                                </form>
                            </div>
                        </div>
                        <hr/>
                        <h3 class="spec">Promotions</h3>
                        <div class="info-text">
                            <h3><span class="color-text">NEW</span> Brushed- Responsive One Page Template</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam.</p>
                            <form name="form2" action="#">
                                <input class="button button-mini" type="button" name="editPromotionButton" value="Edit" />   
                                <input class="button button-mini" type="button" name="updatePromotionButton" value="Update" disabled="true" />   
                                <input class="button button-mini" type="button" name="cancelPromotionButton" value="Cancel" disabled="true" />   
                                <input class="button button-mini" type="button" name="removePromotionButton" value="Remove" />                           
                            </form>
                        </div>
                        <div class="info-text">
                            <h3><span class="color-text">NEW</span> Brushed- Responsive One Page Template</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam.</p>
                            <form name="form2" action="#">
                                <input class="button button-mini" type="button" name="editPromotionButton" value="Edit" />   
                                <input class="button button-mini" type="button" name="updatePromotionButton" value="Update" disabled="true" />   
                                <input class="button button-mini" type="button" name="cancelPromotionButton" value="Cancel" disabled="true" />   
                                <input class="button button-mini" type="button" name="removePromotionButton" value="Remove" />                           
                            </form>
                        </div>
                        <div class="accordion-group">
                            <div class="accordion-heading togglize">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#creating-promotion">
                                    Add new promotion
                                    <span class="font-icon-plus"></span>
                                    <span class="font-icon-minus"></span>
                                </a>
                            </div>
                            <div id="creating-promotion" class="accordion-body collapse">
                                <div class="accordion-inner">
                                    <form id="contact-form" class="contact-form" name="createform" action="#" >

                                        Title:<br/> 
                                        <input id="contact_name" type="text" name="nameText" placeholder="Sample First Name" />

                                        Description:<br/>
                                        <textarea id="contact_message" name="descriptionText" placeholder="Sample Description" rows="15" cols="40"></textarea>

                                        <p class="contact-submit">
                                            <a id="contact-submit" class="submit" href="#">Create new Promotion</a>
                                            <!--<a id="contact-submit" class="submit" data-toggle="collapse" data-parent="#" href="#creating-promotion">Cancel</a>-->
                                        </p>

                                        <div id="response">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <hr/>
                        <h3 class="spec">Rooms</h3>
                        <nav id="options" class="work-nav">
                            <table id="filters" class="option-set table table-hover" data-option-key="filter">
                                <caption>Room Type List</caption>
                                <tr>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>People</th>
                                    <th>Area</th>
                                    <th>Description</th>
                                    <th>Price</th>
                                    <th></th>
                                </tr>
                                <tr>
                                    <th>--------</th>
                                    <th><a href="#filter" data-option-value="*" class="selected">All</a></th>
                                    <th>--------</th>
                                    <th>--------</th>
                                    <th>--------</th>
                                    <th>--------</th>
                                    <th>--------</th>
                                </tr>
                                <tr>
                                    <td><img src="_include/img/work/thumbs/image_01.jpg" width="90px" /></td>
                                    <td><a href="#filter" data-option-value=".design">Design</a></td>
                                    <td>2</td>
                                    <td>25</td>
                                    <td></td>
                                    <td>1,900,000</td>
                                    <td><input type="checkbox" value=""></td>
                                </tr>
                                <tr>
                                    <td><img src="_include/img/work/thumbs/image_01.jpg" width="90px" /></td>
                                    <td><a href="#filter" data-option-value=".photography">Photography</a></td>
                                    <td>2</td>
                                    <td>25</td>
                                    <td></td>
                                    <td>1,900,000</td>
                                    <td><input type="checkbox" value=""></td>
                                </tr>
                                <tr>
                                    <td><img src="_include/img/work/thumbs/image_01.jpg" width="90px" /></td>
                                    <td><a href="#filter" data-option-value=".video">Video</a></td>
                                    <td>2</td>
                                    <td>25</td>
                                    <td></td>
                                    <td>1,900,000</td>
                                    <td><input type="checkbox" value=""></td>
                                </tr>
                                <tr>
                                    <th>--------</th>
                                    <th><a href="#filter" data-option-value="*" class="selected">All</a></th>
                                    <th>--------</th>
                                    <th>--------</th>
                                    <th>--------</th>
                                    <th>--------</th>
                                    <th><button class="btn btn-danger" type="button">Remove</button></th>
                                </tr>
                            </table>
                        </nav>
                        <div class="accordion-group">
                            <div class="accordion-heading togglize">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#creating-room">
                                    Create new room type
                                    <span class="font-icon-plus"></span>
                                    <span class="font-icon-minus"></span>
                                </a>
                            </div>
                            <div id="creating-room" class="accordion-body collapse">
                                <div class="accordion-inner">
                                    <form id="contact-form" class="contact-form" name="createform" action="#" >
                                        Image:<br/>
                                        <input id="contact_email" type="file" name="starText" placeholder="Sample Email" />

                                        Name:<br/> 
                                        <input id="contact_name" type="text" name="nameText" placeholder="Sample First Name" />

                                        People:<br/>
                                        <input id="contact_name" type="text" name="addressText" placeholder="Sample First Name" />

                                        Area:<br/>
                                        <input id="contact_email" type="text" name="phoneText" placeholder="Sample Last Name" />

                                        Price:<br/>
                                        <input id="contact_email" type="text" name="priceText" placeholder="Sample Birthday" />

                                        Description:<br/>
                                        <textarea id="contact_message" name="descriptionText" placeholder="Sample Description" rows="15" cols="40"></textarea>

                                        <p class="contact-submit">
                                            <a id="contact-submit" class="submit" href="#">Create new Room Type</a>
                                            <!--<a id="contact-submit" class="submit" data-toggle="collapse" data-parent="#" href="#creating-room">Cancel</a>-->
                                        </p>

                                        <div id="response">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <hr/>
                        <div class="row">
                            <section id="projects">
                                <ul>
                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 design">
                                        <a href="#myModal" role="button" class="btn btn-warning" data-toggle="modal">
                                            <h3>101</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 design">
                                        <a href="#myModal" role="button" class="btn btn-success" data-toggle="modal">
                                            <h3>102</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 photography">
                                        <a href="#myModal" role="button" class="btn" data-toggle="modal">
                                            <h3>103</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 video">
                                        <a href="#myModal" role="button" class="btn" data-toggle="modal">
                                            <h3>104</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 photography">
                                        <a href="#myModal" role="button" class="btn" data-toggle="modal">
                                            <h3>105</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 photography">
                                        <a href="#myModal" role="button" class="btn btn-info" data-toggle="modal">
                                            <h3>106</h3>
                                            Booked dates:
                                            <ul>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 video">
                                        <a href="#myModal" role="button" class="btn" data-toggle="modal">
                                            <h3>107</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 design">
                                        <a href="#myModal" role="button" class="btn" data-toggle="modal">
                                            <h3>108</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->

                                    <!-- Item Project and Filter Name -->
                                    <li class="item-thumbs span2 design">
                                        <a href="#myModal" role="button" class="btn" data-toggle="modal">
                                            <h3>109</h3>
                                            Booked dates:
                                            <ul>
                                                <li>11/2/2013 - 11/3/2013</li>
                                                <li>12/2 - 12/3</li>
                                            </ul>
                                            Maintain dates:
                                            <ul>
                                                <li>10/3 - 11/2</li>
                                                <li>11/3 - 12/2</li>
                                            </ul>
                                        </a>
                                    </li>
                                    <!-- End Item Project -->
                                </ul>
                            </section>
                        </div>
                    </div>

                </div>
                <!-- End Portfolio Projects -->
            </div>
        </div>
        <!-- End Our Work Section -->



        <!-- Footer -->
        <footer>
            <p class="credits">&copy;2013 Brushed. <a href="http://themes.alessioatzeni.com/html/brushed/" title="Brushed | Responsive One Page Template">Brushed Template</a> by <a href="http://www.alessioatzeni.com/" title="Alessio Atzeni | Web Designer &amp; Front-end Developer">Alessio Atzeni</a></p>
        </footer>
        <!-- End Footer -->

        <!-- Back To Top -->
        <a id="back-to-top" href="#">
            <i class="font-icon-arrow-simple-up"></i>
        </a>
        <!-- End Back to Top -->

        <!-- Js -->
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  jQuery Core -->
        <script src="_include/js/bootstrap.min.js"></script> <!-- Bootstrap -->
        <script src="_include/js/supersized.3.2.7.min.js"></script> <!-- Slider -->
        <script src="_include/js/waypoints.js"></script> <!-- WayPoints -->
        <script src="_include/js/waypoints-sticky.js"></script> <!-- Waypoints for Header -->
        <script src="_include/js/jquery.isotope.js"></script> <!-- Isotope Filter -->
        <script src="_include/js/jquery.fancybox.pack.js"></script> <!-- Fancybox -->
        <script src="_include/js/jquery.fancybox-media.js"></script> <!-- Fancybox for Media -->
        <script src="_include/js/jquery.tweet.js"></script> <!-- Tweet -->
        <script src="_include/js/plugins.js"></script> <!-- Contains: jPreloader, jQuery Easing, jQuery ScrollTo, jQuery One Page Navi -->
        <script src="_include/js/main.js"></script> <!-- Default JS -->
        <script src="_include/js/hotelBooking.js"></script> <!-- Custom JS -->
        <!-- End Js -->

    </body>
</html>